import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Platform,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import NavCon from '../../Public/NavCon';

class List extends Component {
  render() {
    const { data } = this.props;
    return (
      <View style={{ marginLeft: 0, marginTop: PxToDp(10) }}>
        <View style={styles.arrow} />
        <Text style={[styles.listContent]}>
          {
            data.map(d => (
              <Text style={{ color: d.sign ? '#667aff' : '#333', fontSize: PxToDp(14) }}>{d.value}</Text>
            ))
        }
        </Text>
      </View>);
  }
}

class Prompt extends Component {
  _goBack() {
    this.props.navigator.pop();
  }

  render() {
    const { terminology } = this.props;
    const values = terminology ? terminology.values ? terminology.values : null : null;

    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <NavCon currentTitle="销售话术" bgColor="#fff" onPress={() => this._goBack()} />
        <ScrollView>
          { values ?
            values.map(val => (
              <View
                key={val[0]}
                style={{ flex: 1, paddingLeft: PxToDp(17), marginBottom: PxToDp(20) }}
              >
                <Text>{val[0]}</Text>
                <List
                  data={val[1]}
                />
              </View>
            )) : null
          }

        </ScrollView>
      </View>);
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  bgColor: {
    backgroundColor: '#fff',
  },
  listContent: {
    width: PxToDp(324),
    marginLeft: PxToDp(20),
    paddingTop: PxToDp(16),
    paddingBottom: PxToDp(16),
    paddingLeft: PxToDp(14),
    paddingRight: PxToDp(14),
    backgroundColor: '#f5f5fb',
    borderRadius: PxToDp(30),
  },
  arrow: {
    position: 'absolute',
    top: 0,
    left: PxToDp(10),
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderWidth: 16,
    borderTopColor: '#f5f5fb', // 下箭头颜色
    borderLeftColor: 'transparent', // 右箭头颜色
    borderBottomColor: 'transparent', // 上箭头颜色
    borderRightColor: 'transparent', // 左箭头颜色
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
});

export default Prompt;
